<!--
 * @Author: 亚亚
-->
<!--
 * @Author: 亚亚
-->
<!--
 * @Author: 亚亚
-->
<script setup lang="ts">
let msg: Ref<string> = ref('Hello World!')
const reverse = function():void {
  msg.value = msg.value.split('').reverse().join('')
}
// const addStr = function():void {
//   msg.value += '!'
// }
const color = ref('green')
const changeColor = ()=> {
  color.value = color.value === 'green' ? 'red' : 'green'
}
const viewList: Ref<number[]> = ref([1,2,3])
let listFlag: Ref<boolean> = ref(true)

const input = ref<HTMLInputElement | null>(null)
watchEffect(()=> { 
  if(input.value) {
    console.dir(input, 123)
    input.value.focus()
  }
})

interface ObjType {
  count?: number
}
const count: ObjType = reactive({})
count.count = 12
const addCount = function() {
  if(count.count) count.count++
}
</script>
<template>
  <div id="div">{{msg}}</div>
  <el-button id="btn" @click="reverse">反转字符串</el-button>
  <el-button @click="msg += '!'">添加“！”</el-button>
  <span @click="changeColor" :style="{ color }">点我切换颜色</span>

  <div>
    <el-button @click="listFlag = !listFlag">显示/隐藏</el-button>
    <el-button @click="viewList.push(viewList.length + 1)">添加数</el-button>
    <el-button @click="viewList.pop()">删除数</el-button>
    <el-button @click="viewList.reverse()">倒叙数</el-button>
    <ul v-if="listFlag">
      <li v-for="(item, index) in viewList" :key="index">{{ item }}</li>
    </ul>
    <span v-else>列表还在，但是被隐藏了</span>
    <el-input v-model="msg" ref="input"></el-input>                        
    <div @click="addCount">{{ count.count }}</div>
  </div>
</template>
<style lang="sass">

</style>